<template>
  <div>
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">人物介绍</span>
        </div>
        <p v-if="bio === 'loading'" class="abs">
          <loading1 :emptyText="emptyText"/>
        </p>
        <p v-else>
          <span v-html="bio||'暂无内容'"></span>
        </p>
      </el-card>
    </div>
    <!-- 人际关系图 -->
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">人际关系图</span>
        </div>
        <ChartFour/>
      </el-card>
    </div>
    <!-- 科研人才足迹圈、工作履历分析 -->
    <div class="card-box">
      <el-card class="elcard" style="flex:.4;align-self:normal;margin-right:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">科研人才足迹圈</span>
        </div>
        <ChartThree :record="record"/>
      </el-card>
      <el-card class="elcard" style="flex:.6;align-self:normal;margin-left:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">工作履历分析</span>
        </div>
        <WorkExperience :record="record"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import ChartThree from './ChartThree'
import ChartFour from './ChartFour'
import WorkExperience from './WorkExperience'
export default {
  props: {
    bio: {
      type: String
    }
  },
  components: {
    ChartThree,
    ChartFour,
    WorkExperience
  },
  data() {
    return {
      info: {},
      record: [],
      emptyText: 'loading'
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.checkBio()
      this.getTalentsRecord()
    },
    // 检测Bio字段
    checkBio() {
      if (this.bio === 'loading') {
        this.emptyText = 'loading'
      } else {
        this.emptyText = '暂无数据'
      }
    },
    // 获取科研人才足迹圈
    getTalentsRecord() {
      this.$post(this.$Url.team.talentsRecord, {
        personId: this.info.key,
        companyName: this.info.companyName
      }).then(res => {
        let data = res.data || []
        this.record = data
      }).catch(err => {})
    },
  },
  watch: {
    bio: {
      handler(newVal, oldVal) {
        this.checkBio()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.abs {
  width: 100%;
  line-height: .24rem;
  font-size: .14rem;
  color: $color2;
  .tit {
    display: inline-block;
    font-size: .16rem;
    color: $color2;
  }
}
</style>